<template>
  <div class="PalyLive">
    <!-- <div class="ass" id="player"></div>
    <el-button @click="initAgora">点击播放</el-button>
    <el-button @click="leave">离开</el-button> -->
    <el-row>
      <el-col :span="6"
        ><div class="left">
          <el-row>
            <el-col :span="8">房间名：</el-col>
            <el-col :span="16">一起来摸鱼</el-col>
            <el-col :span="8">主播昵称：</el-col>
            <el-col :span="16">成都吴彦祖</el-col>
            <el-col :span="8">主播ID：</el-col>
            <el-col :span="16">88888</el-col>
            <el-col :span="8">开播时间：</el-col>
            <el-col :span="16">2012-12-30</el-col>
            <el-col :span="8">直播时长：</el-col>
            <el-col :span="16">30h24m24s</el-col>
            <el-col :span="8">直播收益：</el-col>
            <el-col :span="16">250000</el-col>
            <el-col :span="8">观看人数：</el-col>
            <el-col :span="16">250000</el-col>
            <el-col :span="8">打赏人数：</el-col>
            <el-col :span="16">250000</el-col>
            <el-col :span="8">当前权重：</el-col>
            <el-col :span="16">150</el-col>
          </el-row>
        </div></el-col
      >
      <el-col :span="12">
        <div class="box">
          <div id="video"></div>
          <div class="btnBox">
            <el-button type="primary" plain>上一条</el-button>
            <el-button type="success" @click="initAgora" plain>刷新</el-button>
            <el-button type="primary" plain>下一条</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="right">
          <el-button plain @click="warning('3')">封禁直播</el-button>
          <el-button plain @click="warning('2')">关闭直播</el-button>
          <el-button plain @click="warning('1')">警告直播</el-button>
          <el-button plain @click="setWeight">设置权重</el-button>
          <el-button plain>热榜第一</el-button>
          <el-button plain @click="setHot">设置热门</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="设置热榜"
      append-to-body
      :visible.sync="hotShow"
      width="30%"
      @close="hotClose"
    >
      <el-form ref="hotForm" :model="hotForm" label-width="120px">
        <el-form-item label="热榜排名">
          <el-input v-model="hotForm.name"></el-input>
        </el-form-item>
        <el-form-item label="热榜时长(分钟)">
          <el-input v-model="hotForm.time"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hotShow = false">取 消</el-button>
        <el-button type="primary" @click="hotShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置权重"
      append-to-body
      :visible.sync="weightShow"
      width="30%"
      @close="hotClose"
    >
      <el-input-number
        v-model="weight"
        :min="1"
        :max="1000"
        label="请输入"
      ></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="weightShow = false">取 消</el-button>
        <el-button type="primary" @click="weightShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="操作"
      append-to-body
      :visible.sync="warningShow"
      width="40%"
      @close="hotClose"
    >
      <el-form ref="hotForm" :model="warningForm" label-width="120px">
        <el-form-item label="操作类型">
          <el-radio-group v-model="warningForm.type">
            <el-radio label="1">警告</el-radio>
            <el-radio label="2">关闭</el-radio>
            <el-radio label="3">禁封</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="快捷理由">
          <el-radio-group v-model="warningForm.reason">
            <el-radio label="裸露身体">裸露身体</el-radio>
            <el-radio label="内容低俗">内容低俗</el-radio>
            <el-radio label="涉嫌危害生命">涉嫌危害生命</el-radio>
            <el-radio label="侮辱谩骂">侮辱谩骂</el-radio>
            <el-radio label="血腥暴力">血腥暴力</el-radio>
            <el-radio label="危害国家安全">危害国家安全</el-radio>
            <el-radio label="危害国家安全">危害国家安全</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手动输入理由">
          <el-input v-model="warningForm.reason"> </el-input>
        </el-form-item>
        <el-form-item v-show="warningForm.type == 3" label="禁封天数">
          <el-radio-group v-model="warningForm.banTime">
            <el-radio
              v-for="(item, index) in banTimeOption"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="warningShow = false">取 消</el-button>
        <el-button type="primary" @click="warningShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AgoraRTC from "agora-rtc-sdk-ng";
export default {
  props: ["studio"],
  data() {
    return {
      AgoraClient: null,
      hotShow: false,
      hotForm: { name: "", time: "" },
      weightShow: false,
      weight: 70,
      warningShow: false,
      warningForm: {
        type: "",
        reason: "",
        banTime: "",
      },
      banTimeOption: [
        { label: "1天", value: 86400 },
        { label: "3天", value: 259200 },
        { label: "7天", value: 604800 },
        { label: "15天", value: 1296000 },
        { label: "30天", value: 2592000 },
        { label: "永久", value: -1 },
      ],
    };
  },
  methods: {
    setHot() {
      this.hotShow = true;
    },
    hotClose() {
      this.hotForm = { name: "", time: "" };
    },
    setWeight() {
      this.weightShow = true;
    },
    warning(type) {
      this.warningForm.type = type;
      this.warningShow = true;
    },
    async initAgora() {
      console.log(12);
      await this.AgoraClient.join(
        "31ea0751aba14d5990c54a5c134538f2", //appID
        "262", //渠道
        "00631ea0751aba14d5990c54a5c134538f2IACwvq2E98pwGKjv60cSdnDaETAnXQBe1/LDL8w+zh2iZhkoZZkAAAAAIgAmNgEARc17YQQAAQBFzXthAwBFzXthAgBFzXthBABFzXth" //token
        //uid
      );
      this.AgoraClient.on("user-published", async (user, type) => {
        // 开始订阅远端用户。
        let userData = await this.AgoraClient.subscribe(user, type);
        if (type === "video") {
          // 这里的 id 可以是一个 div 盒子的 id 属性，也可以是一个 dom，但标签必须是 div
          userData.play("video");
          console.log("video订阅成功了");
        } else if (type === "audio") {
          userData.play();
          console.log("audio订阅成功了");
        }
      });
    },
    //离开直播
    async leave() {
      await this.AgoraClient.leave();
    },
  },
  mounted() {
    this.AgoraClient = AgoraRTC.createClient({
      mode: "live", // 模式
      codec: "vp8", // 编码格式
      role: "audience", // 角色
    });
  },
};
</script>

<style lang="less" scoped>
.PalyLive {
  .left {
    font-size: 16px;
    line-height: 30px;
  }
  .box {
    width: 100%;
    padding: 0 10%;
    #video {
      width: 100%;
      height: 600px;
      background-color: #555555;
    }
    .btnBox {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .el-button {
        margin-left: 0;
      }
    }
  }
  .right {
    display: flex;
    padding: 0 20%;
    height: 650px;
    flex-direction: column-reverse;
    .el-button {
      width: 100%;
      margin-left: 0;
      margin-top: 20px;
    }
  }
}
</style>